<template>
  <n-form id="form" ref="formRef" :label-width="80" :model="formValue" :rules="rules" :size="size">
    <n-form-item label="头像" path="user.name">
      <n-image width="100" src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
    </n-form-item>
    <n-form-item label="用户名" path="user.name">
      <n-input v-model:value="formValue.user.name" placeholder="输入用户名" />
    </n-form-item>
    <n-form-item label="密码" path="user.password">
      <n-input v-model:value="formValue.user.password" placeholder="输入密码" />
    </n-form-item>
    <n-form-item label="手机号" path="user.phone">
      <n-input v-model:value="formValue.user.phone" placeholder="输入手机号" />
    </n-form-item>
    <n-form-item label="账户余额" path="user.balance">
      <div>{{ formValue.user.balance }}</div>
    </n-form-item>
    <n-form-item label="权限" path="user.role">
      <div>{{ formValue.user.role }}</div>
    </n-form-item>
    <n-form-item>
      <n-button attr-type="button" @click="handleValidateClick"> 确认 </n-button>
    </n-form-item>
  </n-form>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { useMessage } from 'naive-ui'
import { createLocalStorage } from '@/utils/cache'

export default defineComponent({
  setup() {
    const formRef = ref(null)
    const formValue = ref({
      user: {
        name: 'admin',
        password: 'admin',
        phone: '19954621386',
        balance: '100',
        role: 'admin',
      },
    })
    const message = useMessage()
    return {
      formRef,
      size: ref('medium'),
      formValue,
      rules: {
        user: {
          name: {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
          },
          password: {
            required: true,
            message: '请输入密码',
            trigger: ['input', 'blur'],
          },
          phone: {
            required: true,
            message: '请输入手机号',
            trigger: ['input'],
          },
        },
      },
      handleValidateClick(e) {
        const ls = createLocalStorage({ prefixKey: 'login_' })
        const lsLoginInfo = ls.get('loginInfo')
        // if (lsLoginInfo) {
        //   loginInfo.value.username = lsLoginInfo.username || ''
        //   loginInfo.value.password = lsLoginInfo.password || ''
        // }
        ;(lsLoginInfo.username = formValue.value.user.name),
          (lsLoginInfo.password = formValue.value.user.password),
          (lsLoginInfo.role = formValue.value.user.role),
          (lsLoginInfo.balance = formValue.value.user.balance),
          (lsLoginInfo.phone = formValue.value.user.phone),
          ls.set('loginInfo', formValue.value.user)
        console.log(lsLoginInfo)
        // e.preventDefault()
        // formRef.value?.validate((errors) => {
        //   if (!errors) {
        //     message.success('Valid')
        //   } else {
        //     console.log(errors)
        //     message.error('Invalid')
        //   }
        // })
        // console.log(11111111111)
        // console.log(formValue.value.user)
      },
    }
  },
})
</script>

<style lang="scss" scoped>
#form {
  width: 90%;
}
</style>
